<template>
  <!--表单组件-->
  <el-dialog
    :close-on-click-modal="false"
    :before-close="crud.cancelCU"
    :visible.sync="crud.status.cu > 0"
    :title="crud.status.title"
    width="700px"
    class="operPatientEdit"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="120px"
    >
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="form.patientName"></el-input>
      </el-form-item>
      <el-form-item label="患者性别" prop="gender">
        <el-radio-group v-model="form.gender">
          <el-radio
            v-for="item in dict.gender"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthDay">
        <el-date-picker
          v-model="form.birthDay"
          type="date"
          value-format="timestamp"
          format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="患者依从性预测">
        <el-radio-group v-model="form.compliance">
          <el-radio
            v-for="item in dict.patient_compliance"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 此处男女展示信息不同 -->
      <template v-if="form.gender === 'M'">
        <el-form-item label="身高增长">
          <el-radio-group v-model="form.hightGrow">
            <el-radio
              v-for="item in dict.hight_grow"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="胡须">
          <el-radio-group v-model="form.beard">
            <el-radio
              v-for="item in dict.beard"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="喉结">
          <el-radio-group v-model="form.adamsApple">
            <el-radio
              v-for="item in dict.adams_apple"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template v-else-if="form.gender === 'F'">
        <el-form-item label="女性月经">
          <el-radio-group v-model="form.period">
            <el-radio
              v-for="item in dict.period"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初潮时间">
          <el-input v-model="form.firstPeriod"></el-input>
        </el-form-item>
      </template>
      <el-form-item label="家长姓名">
        <el-input v-model="form.parent"></el-input>
      </el-form-item>
      <el-form-item label="家长关系">
        <el-select v-model="form.relationship">
          <el-option
            v-for="item in dict.patient_parent_rel"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="家长职业">
        <el-input v-model="form.parentProfession"></el-input>
      </el-form-item>
      <el-form-item label="家长联系方式">
        <el-input v-model="form.parentMobile"></el-input>
      </el-form-item>
      <el-form-item label="家长正畸史">
        <el-input v-model="form.orthodonticHis"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="crud.cancelCU">取消</el-button>
      <el-button
        :loading="crud.cu === 2"
        type="primary"
        @click="crud.submitCU"
      >确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
const defaultForm = {
  id: null,
  patientName: null,
  gender: null,
  birthDay: null,
  compliance: null,
  hightGrow: null,
  adamsApple: null,
  period: null,
  firstPeriod: null,
  parent: null,
  relationship: null,
  parentProfession: null,
  parentMobile: null,
  orthodonticHis: null
};
import { form, crud } from '@crud/crud';
export default {
  mixins: [form(defaultForm), crud()],
  dicts: [
    'gender',
    'patient_compliance',
    'hight_grow',
    'beard',
    'adams_apple',
    'period',
    'patient_parent_rel'
  ],
  data() {
    return {
      time: '',
      rules: {
        patientName: [
          { required: true, message: '请输入患者名称', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择患者性别', trigger: 'blur' }
        ],
        birthDay: [
          { required: true, message: '请输入出生日期', trigger: 'blur' }
        ]
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.operPatientEdit {
  .el-input,
  .el-select {
    width: 300px;
  }
}
</style>
